<template>
	<view>
		<movable-area class="movableArea">
			<movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction" @click="onClick"
				:damping="damping" @change="onChange" >
				<image src="@/static/images/movable.svg" mode="widthFix" class="iconImage"></image>
			</movable-view>
		</movable-area>

		<u-picker :show="show" :closeOnClickOverlay="true" title="环境设置" keyName="label" :defaultIndex="defaultIndex" :columns="columns"
			@confirm="confirm" @cancel="close" @close="close"></u-picker>

	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	export default {
		data() {
			return {
				touchNum: 0,
				x: 350,
				y: 640,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				show: false,
				columns: [
					[{
							label: '开发环境',
							id: 'dev'
						},
						{
							label: '测试环境',
							id: 'test'
						},
						{
							label: '生产环境',
							id: 'prod'
						}
					]
				],
				defaultIndex:[0]
			};
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			}
		},
		mounted() {
			this.setActiveIndex();
		},
		methods: {
			setActiveIndex(){
			    let index = this.columns[0].findIndex(item => item.id == storage.get('env')) || 0
			    this.defaultIndex= [ index ]
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				let env = e["value"][0]['id']
				let name = e["value"][0]['label']
				storage.set('env', env)
				this.show = false
				this.$modal.loading("环境切换中，请耐心等待...")
				setTimeout(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$modal.closeLoading();
						this.$modal.msgSuccess(name)
						// this.$tab.reLaunch('/pages/login');
					})

				}, 1000)
			},
			close(){
				this.setActiveIndex();
				this.show=false;
			},
			onChange(e) {
				// if (e.detail.source === "touch") {
				// 	this.move.x = e.detail.x;
				// 	this.move.y = e.detail.y;
				// }
			},
			onClick(){
				this.show = true;
			},
		}
	}
</script>
<style lang="scss">
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;

		.movableView {
			pointer-events: auto; //可以点击
			width: 120rpx;
			height: 120rpx;
			padding: 10rpx;
			border-radius: 100%;
			// border: 2px solid #f8931f;

			.iconImage {
				display: block;
				width: 120rpx;
				height: 120rpx;
				// animation: iconImage 5s linear infinite;
			}

			@keyframes iconImage {
				0% {
					-webkit-transform: rotate(0deg);
				}

				25% {
					-webkit-transform: rotate(90deg);
				}

				50% {
					-webkit-transform: rotate(180deg);
				}

				75% {
					-webkit-transform: rotate(270deg);
				}

				100% {
					-webkit-transform: rotate(360deg);
				}
			}

			// 客服
			.contact {
				width: 50px;
				height: 50px;
				overflow: hidden;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 100%;
				opacity: 0;
			}

		}
	}
</style>